<template>
  <div class="menu-wrapper" ref="wrapper">
    <ul>
      <li class="menu-item border-bottom"
          :class="{'current':currClass(index)}"
          v-for="(item,index) in goods"
          :key="index"
          :ref="index"
          @click="selectMenu(index)"
      >
        <span class="text">
          <span v-show="hasIcon(item)" class="icon" :class="classMap[item.type]"></span>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'MenuWrapper',
  props: {
    goods: Array,
    currFoodIndex: Number
  },
  data () {
    return {
      currMenuIndex: 0
    }
  },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  mounted () {
    this.initScroll()
  },
  watch: {
    currFoodIndex () {
      this.currMenuIndex = this.currFoodIndex
      const element = this.$refs[this.currMenuIndex][0]
      this.menuScroll.scrollToElement(element, 500)
    }
  },
  methods: {
    initScroll () {
      this.menuScroll = new Bscroll(this.$refs.wrapper, {
        click: true
      })
    },
    hasIcon (item) {
      return item.type > 0
    },
    currClass (index) {
      return this.currMenuIndex === index
    },
    selectMenu (index) {
      this.currMenuIndex = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../assets/css/mixin"
  .menu-wrapper
    flex: 0 0 80px
    width: 80px
    background: #f3f5f7
    .menu-item
      display: table
      height: 54px
      width: 56px
      padding: 0 12px
      line-height: 14px
      &.current
        position:relative
        z-index:10
        margin-top:-1px
        background:#fff
        font-weight:700
        .text
          &:after
            display:none
      .text
        display: table-cell
        width: 56px
        vertical-align: middle
        font-size: 12px
        .icon
          display: inline-block
          vertical-align: top
          width: 12px
          height: 12px
          margin-right: 2px
          background-size: 12px 12px
          background-repeat: no-repeat
          &.decrease
            bg-image('decrease_3')
          &.discount
            bg-image('discount_3')
          &.guarantee
            bg-image('guarantee_3')
          &.invoice
            bg-image('invoice_3')
          &.special
            bg-image('special_3')
</style>
